<template>
    <div class="Follow" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">关注</p>
        </Top>
        <!--title-->
        <h4 class="flag">全部关注</h4>

        <div class="fixed-wrapper">

            <cube-scroll
                         ref="scroll"
                         :data="list"
                         :options="scrollOptions"
                         @pulling-up="onPullingUp">


                <!--列表-->
                <ul class="list" v-if="list.length>0">
                    <li 
                        @click.stop="$router.push(`/florist?teacher_id=${item.teacher_id}`)"
                        class="clearfix animated flipInX" 
                        :style="{animationDelay:delay(index)}" 
                        v-for="(item,index) in list" 
                        :key="index">
                        <img :src="item.teacher_img" alt="">
                        <div class="info">
                            <h2>{{item.teacher_name}}</h2>
                            <p>{{item.add_time}}</p>
                        </div>
                        <el-button 
                                   @click.stop="cancleFollow(item,index)"
                                   class="button" 
                                   type="primary" 
                                   :loading="item.is_loading" 
                                   :icon="item.is_each==='1'?'':'el-icon-check'">{{item.is_each==='1'?'互相关注':'已关注'}}</el-button>
                    </li>

                </ul>
                <!--无数据时显示-->
                <div class="mid" v-else>
                    <div class="nodata animated fadeIn">
                        <img src="../../assets/huawa-off.png" alt="" />
                        <p>暂无数据..</p>
                    </div>
                </div>

            </cube-scroll>

        </div>

    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'

    export default {
        name: 'Follow',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading: false,//加载动画
                list:[],//列表数据

                /*分页*/
                currentPage:2,//当前页

                /*上拉加载*/
                scrollOptions: {
                    pullUpLoad: {
                        threshold: 20,
                        txt: {
                            more: '加载更多..',
                            noMore: '没有更多了..'
                        },
                        stopTime:1000
                    }
                },
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.user.followlist',{member_id:this.getMemberId(),page:1},(res)=>{
                this.loading = false;
                /*登录是否成功*/
                if(JSON.parse(res.bodyText).status ===1){
                    this.list = JSON.parse(res.bodyText).data.list;
                    //添加字段用于按钮加载动画
                    this.list.forEach((value,index)=>{
                        this.$set(value,'is_loading',false);
                    })
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            //取关
            cancleFollow(item,index){
                item.is_loading = true;//加载动画
                this.Posthttp('/?method=flower.user.addFollow',{member_id:this.getMemberId(),teacher_id:item.teacher_id,follow_type:2},(res)=>{
                    item.is_loading = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.list.splice(index,1)
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });  
            },
            //加载更多
            onPullingUp(){

                this.Posthttp('/?method=flower.user.followlist',{member_id:this.getMemberId(),page:this.currentPage},(res)=>{

                    let Dlength = JSON.parse(res.bodyText).data.list.length
                    if(Dlength>0){
                        this.currentPage++
                        this.list = this.list.concat(JSON.parse(res.bodyText).data.list)
                    }else{
                        this.$refs.scroll.forceUpdate()
                    }
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Follow{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #f2f2f2;
        /**/
        .flag{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            color: #666;
            padding: 0 .2rem;
            border-bottom: .08rem solid #fbfbfb;
        }
        .fixed-wrapper{
            position: fixed;
            width: 100%;
            left: 0;
            top: 1.8rem;
            bottom: 0;
            background: #fff;
        }
        /*list*/
        .list{
            margin-top: .04rem;
            background-color: #fff;
            li{
                padding: .2rem;
                border-bottom: 1px solid #e4e4e4;
                &:last-child{
                    border-bottom: 0;
                }
                img{
                    float: left;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 100%;
                }
                .info{
                    float: left;
                    height: 1rem;
                    padding-left: .2rem;
                    h2{
                        font-weight: 600;
                        font-size: .3rem;
                        color: #333;
                        padding-top: .16rem;
                    }
                    p{
                        color: #777;
                        margin-top: .12rem;
                    }
                }
                .button{
                    padding: 0 .16rem;
                    float: right;
                    height: .56rem;
                    margin-top: .22rem;
                    background: transparent;
                    border: 1px solid #bbb;
                    color: #666;
                    outline: none;
                    border-radius: .06rem;
                    &.on{
                        border: 1px solid #de8a40;
                        color: #de8a40; 
                    }
                }
            }
        }
    }
</style>
